<template>
  <div>

  <el-tabs v-model="activeName" type="card" @tab-click="handleClick" v-if=" user == '00'">
    <el-tab-pane  label="频道数量" name="first">
      <div class="app-container home">
        <!--  首页  -->

        <div style="display: flex;justify-content: space-between;">
          <div>
          <div style="display: flex"> <div class="text-1" style="margin-left:58px;width: 200px;font-size: 26px;font-weight: 500;">数据总览</div>
            <el-row class="box-flex">
              <el-button @click="getData('周')" :class="{ 'is-active': selectedButton === '周' }">本周</el-button>
              <el-button @click="getData('月')" :class="{ 'is-active': selectedButton === '月' }">本月</el-button>
              <el-button @click="getData('全')" :class="{ 'is-active': selectedButton === '全' }">全部</el-button>
            </el-row></div>
            <div style="margin-top: 20px;display: flex;justify-content: space-between;width: auto">

              <div class="zs-box" style="width: 220px;height: 122px;margin-left: 20px" >
                <!--            头像-->
                <img src="../assets/images/5.png" class="tx-box1"/>
                <div>
                  <div class="text-21">区域营商环境</div>
<!--                  <div  class="text-31">{{ quyu }}</div>-->
                  <template>
                    <transition name="fade">
                      <countTo class="text-31" :startVal='startVal' :endVal='quyu' :duration='800'></countTo>
<!--                      <div class="text-31">{{ quyu }}</div>-->
                    </transition>
                  </template>
                </div>
              </div>
              <div class="zs-box2"  style="width: 220px;height: 122px;margin-left: 20px" >
                <img src="../assets/images/8.png" class="tx-box1"/>
                <div>
                  <div class="text-21">产业物理空间</div>
                  <countTo class="text-31" :startVal='startVal' :endVal='wuli' :duration='800'></countTo>
<!--                  <div class="text-31">{{ wuli }}</div>-->
                </div>
              </div>
              <div class="zs-box3"  style="width: 220px;height: 122px;margin-left: 20px" >
                <img src="../assets/images/9.png" class="tx-box1"/>
                <div>
                  <div class="text-21">科技产业服务港</div>
                  <countTo class="text-31" :startVal='startVal' :endVal='serviceArticle' :duration='800'></countTo>
<!--                  <div class="text-31">{{ yfz.serviceArticle}}</div>-->
                </div>
              </div>

              <div class="zs-box4"  style="width: 220px;height: 122px;margin-left: 20px">
                <img src="../assets/images/10.png" class="tx-box1"/>
                <div>
                  <div class="text-21">云课堂</div>
                  <countTo class="text-31" :startVal='startVal' :endVal='classroom' :duration='800'></countTo>
<!--                  <div class="text-31">{{ yfz.classroom }}</div>-->
                </div>
              </div>

              <div class="zs-box5"  style="width: 220px;height: 122px;margin-left: 20px">
                <img src="../assets/images/11.png" class="tx-box1"/>
                <div>
                  <div class="text-21">服务案例</div>
                  <countTo class="text-31" :startVal='startVal' :endVal='wenzhang' :duration='800'></countTo>
<!--                  <div class="text-31">{{yfz.wenzhang}}</div>-->
                </div>
              </div>
              <div class="zs-box"  style="width: 220px;height: 122px;margin-left: 20px">
                <img src="../assets/images/5.png" class="tx-box1"/>
                <div>
                  <div class="text-21">资讯</div>
                  <countTo class="text-31" :startVal='startVal' :endVal='article' :duration='800'></countTo>
<!--                  <div class="text-31">{{ yfz.article }}</div>-->
                </div>
              </div>
<!--              <div class="zs-box4"  style="width: 200px;height: 122px;margin-left: 15px">-->
<!--                <img src="../assets/images/5.png" class="tx-box1"/>-->
<!--                <div>-->
<!--                  <div class="text-21">在线人数</div>-->
<!--                  <div class="text-31">10,118</div>-->
<!--                </div>-->
<!--              </div>-->

            </div>
          </div>
          <!--    <Calendar style="margin-top: 38px"/>-->
        </div>
        <div style="display: flex;margin-top: 60px;margin-left:58px;justify-content: space-between;">
          <div style="width: 602px;height:300px">
            <div>资产分析</div>
            <Zhexian></Zhexian>
          </div>
          <div style="width: 702px;margin-left: 87px">
            <div>资产占比</div>
            <Tubiao/>
            <div class="box-1">
              <div class="box">
                <div  class="text-1">楼宇办公</div>
                <div class="box-2">{{ tupiao.premises.sum }}</div>
              </div>
              <div class="box">
                <div  class="text-1">厂房</div>
                <div class="box-2">{{ tupiao.workshop.sum }}</div>
              </div>
              <div class="box">
                <div  class="text-1">土地</div>
                <div class="box-2">{{ tupiao.land.sum }}</div>
              </div>
              <div class="box">
                <div  class="text-1">仓库</div>
                <div class="box-2">{{ tupiao.warehouse.sum }}</div>
              </div>
              <div class="box">
                <div  class="text-1">园区</div>
                <div class="box-2">{{ tupiao.park.sum }}</div>
              </div>
<!--              <div class="box-xx"></div>-->
              <div class="box">
                <div  class="text-1">公寓</div>
                <div class="box-2">{{ tupiao.warehouse.sum }}</div>
              </div>
<!--              <div class="box-xx"></div>-->
              <div class="box">
                <div class="text-1">拍卖</div>
                <div class="box-2">{{ tupiao.auction.sum }}</div>
              </div>
<!--              <div class="box-xx"></div>-->
              <div class="box">
                <div  class="text-1">楼宇商用</div>
                <div  class="box-2">{{ tupiao.building.sum }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </el-tab-pane>
    <el-tab-pane label="数据总览" name="second">
        <div class="app-container home box-24">
          <!--  首页  -->
<!--          <el-row class="box-flex">-->
<!--            <el-button @click="getsulianList('周')" :class="{ 'is-active': selectedButton === '周' }">本周</el-button>-->
<!--            <el-button @click="getsulianList('月')" :class="{ 'is-active': selectedButton === '月' }">本月</el-button>-->
<!--            <el-button @click="getsulianList('全')" :class="{ 'is-active': selectedButton === '全' }">全部</el-button>-->
<!--          </el-row>-->
          <div style="display: flex">
            <div>
<!--              <div clas="text-1" style="margin-left:58px;width: 200px;font-size: 26px;font-weight: 500;">数据总览</div>-->
              <div style="display: flex"> <div clas="text-1" style="margin-left:58px;width: 200px;font-size: 26px;font-weight: 500;">数据总览</div>
                <el-row class="box-flex">
                  <el-button @click="getsulianList('周')" :class="{ 'is-active': selectedButton === '周' }">本周</el-button>
                  <el-button @click="getsulianList('月')" :class="{ 'is-active': selectedButton === '月' }">本月</el-button>
                  <el-button @click="getsulianList('全')" :class="{ 'is-active': selectedButton === '全' }">全部</el-button>
                </el-row></div>
              <div style="display: flex;margin-top: 20px">
                <div class="zs-box">
                  <!--            头像-->
                  <div class="tx-box"></div>
                  <div>
                    <div class="text-2">在线人数</div>
                    <countTo class="text-3" :startVal='startVal' :endVal='sjyl' :duration='800'></countTo>
<!--                    <div class="text-3">{{ yonghu2.onlineCount }}</div>-->
                  </div>
                </div>
                <div class="zs-box2">
                  <div class="tx-box"></div>
                  <div>
                    <div class="text-2">总注册用户</div>
                    <countTo class="text-3" :startVal='startVal' :endVal='sjyl1' :duration='800'></countTo>
<!--                    <div class="text-3">{{ yonghu2.total}}</div>-->
                  </div>
                </div>
                <div class="zs-box3">
                  <div class="tx-box"></div>
                  <div>
                    <div class="text-2">云课堂数量</div>
                    <countTo class="text-3" :startVal='startVal' :endVal='sjyl2' :duration='800'></countTo>
<!--                    <div class="text-3">{{ provinces.classroom }}</div>-->
                  </div>
                </div>
                <div class="zs-box3">
                  <div class="tx-box"></div>
                  <div>
                    <div class="text-2">资讯数量</div>
                    <countTo class="text-3" :startVal='startVal' :endVal='sjyl3' :duration='800'></countTo>
<!--                    <div  class="text-3">{{ provinces.article }}</div>-->
                  </div>
                </div>
              </div>
            </div>
            <!--    <Calendar style="margin-top: 38px"/>-->
          </div>
          <div style="display: flex;margin-top: 60px;margin-left:58px">
            <div style="width: 702px;height:300px">
              <div>资产分析</div>
              <Zhexian/>
            </div>
            <div style="width: 602px;margin-left: 87px">
              <div>资产占比</div>
              <Tubiao/>
              <div class="box-1">
                <div class="box">
                  <div  class="text-1">楼宇办公</div>
                  <div class="box-2">{{ tupiao.premises.sum }}</div>
                </div>
                <div class="box">
                  <div  class="text-1">厂房</div>
                  <div class="box-2">{{ tupiao.workshop.sum }}</div>
                </div>
                <div class="box">
                  <div  class="text-1">土地</div>
                  <div class="box-2">{{ tupiao.land.sum }}</div>
                </div>
                <div class="box">
                  <div  class="text-1">仓库</div>
                  <div class="box-2">{{ tupiao.warehouse.sum }}</div>
                </div>
                <div class="box">
                  <div  class="text-1">园区</div>
                  <div class="box-2">{{ tupiao.park.sum }}</div>
                </div>
                <!--              <div class="box-xx"></div>-->
                <div class="box">
                  <div  class="text-1">公寓</div>
                  <div class="box-2">{{ tupiao.warehouse.sum }}</div>
                </div>
                <!--              <div class="box-xx"></div>-->
                <div class="box">
                  <div class="text-1">拍卖</div>
                  <div class="box-2">{{ tupiao.auction.sum }}</div>
                </div>
                <!--              <div class="box-xx"></div>-->
                <div class="box">
                  <div  class="text-1">楼宇商用</div>
                  <div  class="box-2">{{ tupiao.building.sum }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </el-tab-pane>
    <el-tab-pane label="用户维度" name="third">
      <div class="app-container home box-23" >
        <!--  首页  -->
<!--        <el-row class="box-flex">-->
<!--          <el-button @click="getusreList('周')" :class="{ 'is-active': selectedButton === '周' }">本周</el-button>-->
<!--          <el-button @click="getusreList('月')" :class="{ 'is-active': selectedButton === '月' }">本月</el-button>-->
<!--          <el-button @click="getusreList('全')" :class="{ 'is-active': selectedButton === '全' }">全部</el-button>-->
<!--        </el-row>-->
        <div style="display: flex">
          <div>
            <div style="display: flex"> <div class="text-1" style="margin-left:58px;width: 200px;font-size: 26px;font-weight: 500;">数据总览</div>
              <el-row class="box-flex">
                <el-button @click="getusrezList('周')" :class="{ 'is-active': selectedButton === '周' }">本周</el-button>
                <el-button @click="getusrezList('月')" :class="{ 'is-active': selectedButton === '月' }">本月</el-button>
                <el-button @click="getusrezList('全')" :class="{ 'is-active': selectedButton === '全' }">全部</el-button>
              </el-row></div>
            <div style="margin-top: 20px;width: 100%">
              <div style="display: flex">
              <div class="zs-box">
                <!--            头像-->
<!--                <div class="tx-box"></div>-->
                <img src="../assets/images/5.png" class="tx-box"/>
                <div>
                  <div class="text-2">总注册用户</div>
<!--                  <countTo class="text-3" :startVal='startVal' :endVal='yonghu.total' :duration='800'></countTo>-->
                  <countTo class="text-3" :startVal='startVal' :endVal='endValq' :duration='800'></countTo>
<!--                  <div  class="text-3" >{{ yonghu.total }}</div>-->
                </div>
              </div>
              <div class="zs-box2">
<!--                <div class="tx-box"></div>-->
                <img src="../assets/images/8.png" class="tx-box"/>
                <div>
                  <div class="text-2">当前在线人数</div>
                  <countTo class="text-3" :startVal='startVal' :endVal='endValq1' :duration='800'></countTo>
<!--                  <div class="text-3">{{ yonghu.addCount }}</div>-->
                </div>
              </div>
                <div class="zs-box">
                  <div class="tx-box"></div>
                  <div>
                    <div class="text-2">新增用户数</div>
                    <countTo class="text-3" :startVal='startVal' :endVal='endValq2' :duration='800'></countTo>
                    <!--                  <div class="text-3">{{ yonghu.onlineCount }}</div>-->
                  </div>
                </div>
                <div class="zs-box4">
                  <!--                <div class="tx-box"></div>-->
                  <img src="../assets/images/10.png" class="tx-box"/>
                  <div>
                    <div class="text-2">已审核用户数</div>
                    <countTo class="text-3" :startVal='startVal' :endVal='endValq3' :duration='800'></countTo>
                    <!--                  <div class="text-3">{{ yonghu.examinedCount }}</div>-->
                  </div>
                </div>
              <div class="zs-box3">
<!--                <div class="tx-box"></div>-->
                <img src="../assets/images/9.png" class="tx-box"/>
                <div>
                  <div class="text-2">待审核用户数</div>
                  <countTo class="text-3" :startVal='startVal' :endVal='endValq4' :duration='800'></countTo>
<!--                  <div class="text-3">{{ yonghu.reviewCount }}</div>-->
                </div>
              </div>

              </div>
              <div style="display: flex;margin-top: 50px">
              <div class="zs-box5">
<!--                <div class="tx-box"></div>-->
                <img src="../assets/images/5.png" class="tx-box"/>
                <div>
                  <div class="text-2">供给产权单位</div>
                  <countTo class="text-3" :startVal='startVal' :endVal='endValq5' :duration='800'></countTo>
<!--                  <div class="text-3">{{ yonghu.needCount }}</div>-->
                </div>
              </div>
              <div class="zs-box3">
                <div class="tx-box"></div>
                <div>
                  <div class="text-2">供给运营单位</div>
                  <countTo class="text-3" :startVal='startVal' :endVal='endValq6' :duration='800'></countTo>
<!--                  <div class="text-3">{{ yonghu.supplyCount }}</div>-->
                </div>
              </div>
              <div class="zs-box5">
                <div class="tx-box"></div>
                <div>
                  <div class="text-2">供给政府单位</div>
                  <countTo class="text-3" :startVal='startVal' :endVal='endValq7' :duration='800'></countTo>
<!--                  <div class="text-3">{{ yonghu.onlineCount }}</div>-->
                </div>
              </div>
                <div class="zs-box">
                  <div class="tx-box"></div>
                  <div>
                    <div class="text-2">需求方用户数</div>
                    <countTo class="text-3" :startVal='startVal' :endVal='endValq8' :duration='800'></countTo>
                    <!--                  <div class="text-3">{{ yonghu.onlineCount }}</div>-->
                  </div>
                </div>

              <div class="zs-box3">
                <div class="tx-box"></div>
                <div>
                  <div class="text-2">游客用户数</div>
                  <countTo class="text-3" :startVal='startVal' :endVal='endValq9' :duration='800'></countTo>
<!--                  <div class="text-3">{{ yonghu.total }}</div>-->
                </div>
              </div>
              </div>
            </div>
          </div>
          <!--    <Calendar style="margin-top: 38px"/>-->
        </div>
        <div style="display: flex;margin-left:40px;margin-top: 60px">
          <div style="width: 702px;height:300px">
            <div>资产分析</div>
            <Zhexian/>
          </div>
          <div style="width: 602px;margin-left: 87px">
            <div>资产占比</div>
            <Tubiao/>
              <div class="box-1">
                <div class="box">
                  <div  class="text-1">楼宇办公</div>
                  <div class="box-2">{{ tupiao.premises.sum }}</div>
                </div>
                <div class="box">
                  <div  class="text-1">厂房</div>
                  <div class="box-2">{{ tupiao.workshop.sum }}</div>
                </div>
                <div class="box">
                  <div  class="text-1">土地</div>
                  <div class="box-2">{{ tupiao.land.sum }}</div>
                </div>
                <div class="box">
                  <div  class="text-1">仓库</div>
                  <div class="box-2">{{ tupiao.warehouse.sum }}</div>
                </div>
                <div class="box">
                  <div  class="text-1">园区</div>
                  <div class="box-2">{{ tupiao.park.sum }}</div>
                </div>
                <!--              <div class="box-xx"></div>-->
                <div class="box">
                  <div  class="text-1">公寓</div>
                  <div class="box-2">{{ tupiao.warehouse.sum }}</div>
                </div>
                <!--              <div class="box-xx"></div>-->
                <div class="box">
                  <div class="text-1">拍卖</div>
                  <div class="box-2">{{ tupiao.auction.sum }}</div>
                </div>
                <!--              <div class="box-xx"></div>-->
                <div class="box">
                  <div  class="text-1">楼宇商用</div>
                  <div  class="box-2">{{ tupiao.building.sum }}</div>
                </div>
              </div>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="数据对比" name="fourth">
      <el-row  class="is_fixed">
        <el-button @click="updateSelectedButton('周')" :class="{ 'is-active': selectedButton === '周' }">本周</el-button>
        <el-button @click="updateSelectedButton('月')" :class="{ 'is-active': selectedButton === '月' }">本月</el-button>
        <el-button @click="updateSelectedButton('全')" :class="{ 'is-active': selectedButton === '全' }">全部</el-button>
      </el-row>
      <div class="app-container home box-21" >

        <div>
          <div class="text-1" style="margin-left:5px;margin-bottom:58px;width: auto;font-size: 26px;font-weight: 500;">空间类型数据饼状图</div>
<!--          <spaceTypeb ref="spaceTypeb"/>-->
          <spaceTypeb/>
        </div>
        <div>
          <div class="text-1" style="margin-left:58px;width: auto;font-size: 26px;font-weight: 500;">空间类型数据柱状图</div>
          <tongjitu/>
        </div>
      </div>
      <div class="box-19">
        <div>
          <div class="text-1" style="margin-left:58px;width: auto;font-size: 26px;font-weight: 500;">空间信息数据</div>
          <Zhubiao ref="Zhubiao"/>
        </div>
        <div>
          <div class="text-1" style="margin-left:58px;width: auto;font-size: 26px;font-weight: 500;">企业用户数据</div>
          <Qiyeuser ref="Qiyeuser"/>
        </div>
        <div>
          <div class="text-1" style="margin-left:58px;width: auto;font-size: 26px;font-weight: 500;">政府用户数据</div>
          <Zfuuser ref="Zfuuser" />
        </div>
        <div>
          <div class="text-1" style="margin-left:58px;width: auto;font-size: 26px;font-weight: 500;">专辑用户数据</div>
          <Zhuanjiuser ref="Zhuanjiuser"/>
        </div>
        <div>
          <div class="text-1" style="margin-left:58px;width: auto;font-size: 26px;font-weight: 500;">服务案例数据</div>
          <FuwuUser ref="FuwuUser"/>
        </div>
        <div>
          <div class="text-1" style="margin-left:58px;width: auto;font-size: 26px;font-weight: 500;">资讯发布数据</div>
          <Zixunfabu ref="Zixunfabu"/>
        </div>
      </div>

    </el-tab-pane>
    <el-tab-pane label="转化统计" name="fifth">
      <el-row class="box-flex">
        <el-button @click="postButton('周')" :class="{ 'is-active': selectedButton === '周' }">本周</el-button>
        <el-button @click="postButton('月')" :class="{ 'is-active': selectedButton === '月' }">本月</el-button>
        <el-button @click="postButton('全')" :class="{ 'is-active': selectedButton === '全' }">全部</el-button>
      </el-row>
      <div class="app-container home box-23 box-20" >
        <div style="width: 95%">
          <div class="text-1" style="margin-left:58px;width: 200px;font-size: 26px;font-weight: 500;">频道浏览分析</div>
          <Pingdaofx ref="Pingdaofx"/>
        </div>
       <div style="width: 95%">
         <div class="text-1" style="margin-left:58px;width: 200px;font-size: 26px;font-weight: 500;">意向客户分析</div>
         <Yxkhfx />
       </div>
        <div style="width: 95%">
          <div class="text-1" style="margin-left:58px;width: 200px;font-size: 26px;font-weight: 500;">提交需求分析</div>
          <Tjxqfx ref="Tjxqfx"/>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick" v-else>
      <el-tab-pane label="用户总览" name="first">
        <div class="app-container home box-23">
          <!--  首页  -->
          <!--          <el-row class="box-flex">-->
          <!--            <el-button @click="getsulianList('周')" :class="{ 'is-active': selectedButton === '周' }">本周</el-button>-->
          <!--            <el-button @click="getsulianList('月')" :class="{ 'is-active': selectedButton === '月' }">本月</el-button>-->
          <!--            <el-button @click="getsulianList('全')" :class="{ 'is-active': selectedButton === '全' }">全部</el-button>-->
          <!--          </el-row>-->
          <div style="display: flex">
            <div>

              <!--              <div clas="text-1" style="margin-left:58px;width: 200px;font-size: 26px;font-weight: 500;">数据总览</div>-->
              <div style="display: flex"> <div clas="text-1" style="margin-left:58px;width: 200px;font-size: 26px;font-weight: 500;">数据总览</div>
                <el-row class="box-flex">
                  <el-button @click="getusreList('周')" :class="{ 'is-active': selectedButton === '周' }">本周</el-button>
                  <el-button @click="getusreList('月')" :class="{ 'is-active': selectedButton === '月' }">本月</el-button>
                  <el-button @click="getusreList('全')" :class="{ 'is-active': selectedButton === '全' }">全部</el-button>
                </el-row></div>
              <div style="display: flex;margin-top: 20px">
                <div class="zs-box">
                  <!--            头像-->
                  <div class="tx-box"></div>
                  <div>
                    <div class="text-2">产业物理空间</div>
                    <countTo class="text-3" :startVal='startVal' :endVal='wulikj' :duration='800'></countTo>
                    <!--                    <div class="text-3">{{ yonghu2.onlineCount }}</div>-->
                  </div>
                </div>
                <div class="zs-box2">
                  <div class="tx-box"></div>
                  <div>
                    <div class="text-2">区域环境</div>

                    <countTo class="text-3" v-hasPermi="['business:businessIntro:list']" :startVal='startVal' :endVal='quyuyj' :duration='800'></countTo>
                    <!--                    <div class="text-3">{{ yonghu2.total}}</div>-->
                  </div>
                </div>
              </div>
            </div>
            <!--    <Calendar style="margin-top: 38px"/>-->
          </div>
          <div>
            <div class="text-1" style="margin-left:58px;margin-top: 100px;width: 200px;font-size: 26px;font-weight: 500;">信息点击量统计</div>
            <Xxdjltj ref="Xxdjltj"/>
          </div>
          <div>
            <div class="text-1" style="margin-left:58px;margin-top: 100px;width: 200px;font-size: 26px;font-weight: 500;">转化统计</div>
            <Zgtj/>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
import countTo from 'vue-count-to';
import { listSuz,statTics,getTisTics,userCount } from "@/api/industry/shulian";
// import Calendar from '@/components/Calendar';
import Tubiao from '../components/Tubiao';
import Zhexian from '../components/Zhexian';
import spaceTypeb from "../components/SpaceTypeb/index.vue";
import tongjitu from "../components/Tongjitu/index.vue";
import Zhubiao from "../components/Zhubiao/index.vue";
import Governmentusers from "../components/Governmentusers/index.vue";
import Pingdaofx from "../components/Pingdaofx/index.vue";
import Yxkhfx from "../components/Yxkhfx/index.vue"
import Tjxqfx from "../components/Tjxqfx/index.vue";
import Zgtj from "../components/Zgtj/index.vue";
import Xxdjltj from "../components/Xxdjltj/index.vue";
import Qiyeuser from "../components/Qiyeuser/index.vue";
import Zfuuser from "../components/Zfuuser/index.vue";
import FuwuUser from "../components/FuwuUser/index.vue";
import Zhuanjiuser from "../components/Zhuanjiuser/index.vue";
import Zixunfabu from "../components/Zixunfabu/index.vue";
import {getQuyu, getWlkjtj, statisTics,getOneUser} from "../api/industry/shulian";
import post from "./system/post/index.vue";
export default {
  name: "Index",
  computed: {
    post() {
      return post
    }
  },
  components:{
    // Calendar,
    Tubiao,
    Zhexian,
    countTo,
    spaceTypeb,
    tongjitu,
    Zhubiao,
    Governmentusers,
    Pingdaofx,
    Yxkhfx,
    Tjxqfx,
    Zgtj,
    Xxdjltj,
    Qiyeuser,
    Zfuuser,
    FuwuUser,
    Zhuanjiuser,
    Zixunfabu
  },
  data() {
    return {
      isSticky: false,
      offsetTop: 0,
      user: null, // 初始化user为空
      //数字开始
      startVal: 0,
      //数字结束
      endVal: [],
      // 版本号
      version: "3.6.2",
      activeName: 'first',
      currentNumber: 0,
      types:'全',
      provinces:[],
      endValq: null,
      endValq1:null,
      endValq2: null,
      endValq3: null,
      endValq4: null,
      endValq5: null,
      endValq6: null,
      endValq7:null,
      endValq8:null,
      endValq9:null,
      serviceArticle:null,
      classroom:null,
      wenzhang:null,
      article:null,
      sjyl:null,
      sjyl1:null,
      sjyl2:null,
      sjyl3:null,
      wulikj:null,
      quyuyj:null,
      yonghu:0,// 用户统计
      yonghu2:[],// 用户统计
      quyu:0,//区域环境统计
      yfz:[],//云课堂，服务，咨询
      wuli:null,//物理空间
      tupiao:[],//图表
      selectedButton: '全',
      userpd:null
    };
  },
  created() {
    this.selectedButton = '全';

  },
  methods: {
    created() {
     // console.log('ssssssssssssssss4')
     //  this.user = JSON.parse(localStorage.getItem('createBy')); // 组件创建时从本地存储取出user并解析为JavaScript对象
      getOneUser().then(res =>{
        this.user = res.data.userType
        console.log("用户信息",this.user,res)

      })
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    handleClick(tab, event) {
      const activeName = this.activeName
     // console.log(activeName,'sssssssss5693');
      if (activeName === 'first') {
        this.getData(this.types)
       console.log(this.startVal,'gundon')
      } else if (activeName === 'second') {
        this.getsulianList(this.types)
       console.log(this.startVal,'gundon')
      } else if (activeName === 'third') {
        this.getusrezList(this.types)
      //  console.log(this.startVal,'gundon')
      }else if (activeName === 'fourth') {
        this.updateSelectedButton(this.types)
         console.log(this.startVal,'gundon')
      }else if (activeName === 'fifth') {
        this.postButton(this.types)
         console.log(this.startVal,'gundon')
      }
    },
    // 频道数量查询
    getData(types){
      //console.log('ssssssssssssssss4')
      // this.user = JSON.parse(localStorage.getItem('createBy')); // 组件创建时从本地存储取出user并解析为JavaScript对象
      //console.log( this.user)
      this.selectedButton = types;
      statTics().then(res =>{
        //console.log("区域营商环境统计",res)
        if (types === '周') {
          this.quyu = res.data.week
          // this.quyu = this.endVal
         // return this.quyu
        } else if (types === '月') {
          this.quyu = res.data.month
          return this.quyu
        } else if (types === '全') {
          this.quyu = res.data.sum
          return this.quyu
        }
      });
      listSuz(types).then(res => {
        //console.log(res, '云课堂、服务案例、资讯数量');
          this.yfz = res.data;
          this.serviceArticle = this.yfz.serviceArticle
          this.classroom = this.yfz.classroom
          this.wenzhang = this.yfz.wenzhang
         this.article = this.yfz.article

      });
      getTisTics().then(res =>{
           // console.log("统计产业物理空间信息",res)
        if (types === '周') {
          this.wuli = res.data.week
        } else if (types === '月') {
          this.wuli = res.data.month
          // console.log(this.wuli)
        } else if (types === '全') {
          this.wuli = res.data.sum
        }
        // this.provinces = res.data;
      })
    },
    //数据总览
    getsulianList(types){
      listSuz(types).then(res =>{
        //console.log(res,'科技产业服务港、云课堂、服务案例、资讯数量')
          this.provinces = res.data;
        this.sjyl2 = this.provinces.classroom
        this.sjyl3 = this.provinces.article

      });
      userCount(types).then(res =>{
        // console.log("用户统计",res)
        this.yonghu2 = res.data;
        this.sjyl = this.yonghu2.onlineCount
        this.sjyl1 = this.yonghu2.total

      })
    },
    //用户维度
    getusreList(types){
      console.log(types)
      getWlkjtj().then(res =>{
        console.log("用户统计用户维度",res)
        if (types === '周') {
          this.wulikj = res.data.week
        } else if (types === '月') {
          this.wulikj = res.data.moth
        } else if (types === '全') {
          this.wulikj = res.data.sum
        }
      });
      getQuyu().then(res =>{
        // console.log("区域环境用户维度",res)
        if (types === '周') {
          this.quyuyj = res.data.week
        } else if (types === '月') {
          this.quyuyj = res.data.month
        } else if (types === '全') {
          this.quyuyj = res.data.sum
        }
      });
    },
    //用户总览
    getusrezList(types){
      userCount(types).then(res =>{
        // console.log("用户统计",res)
        this.yonghu = res.data;
        this.endValq =  this.yonghu.total
        this.endValq1 =  this.yonghu.onlineCount
        this.endValq2 =  this.yonghu.addCount
        this.endValq3 =  this.yonghu.examinedCount
        this.endValq4 =  this.yonghu.reviewCount
        this.endValq5 =  this.yonghu.propertyCount
        this.endValq6 =  this.yonghu.operateCount
        this.endValq7 = this.yonghu.governmentCount
        this.endValq8 = this.yonghu.needCount
        this.endValq9 = this.yonghu.lookCount
      })
    },
    //數據對比
    updateSelectedButton(types) {
      //console.log(types,'數據對比參數')
      this.$refs.Zhubiao.updateChartWithData(types)
      this.$refs.Qiyeuser.updateChartWithData(types)
      this.$refs.Zfuuser.updateChartWithData(types)
      this.$refs.Zhuanjiuser.updateChartWithData(types)
      this.$refs.FuwuUser.updateChartWithData(types)
      this.$refs.Zixunfabu.updateChartWithData(types)
    },
    postButton(types){
      //console.log(types,'數據對比參數')
      this.$refs.Pingdaofx.updateChartWithData(types)
      this.$refs.Tjxqfx.updateChartWithData(types)
    },

    /** 查询科技产业服务港、云课堂、服务案例、资讯数量 */
    getulianList(types){
      listSuz(types).then(res =>{
         //console.log(res,'科技产业服务港、云课堂、服务案例、资讯数量')
        // return  this.provinces = res.data;
      })
    },
    /** 区域营商环境统计 */
    getstatTics(types){
      statTics().then(res =>{
        //console.log("区域营商环境统计",res)
        // this.provinces = res.data;
      })
    },
    //统计产业物理空间信息
    gettisTics(){
      getTisTics().then(res =>{
        // console.log("统计产业物理空间信息",res)
        //console.log(res,'统计63产业物理空间信息')
        return this.tupiao = res.data
      })
    },
    //用户统计
    getuserCount(types){
      userCount(types).then(res =>{
        //console.log("用户统计",res)
        this.yonghu = res.data;
        this.endValq =  this.yonghu.total
        this.endValq1 =  this.yonghu.addCount
        this.endValq2 =  this.yonghu.reviewCount
        this.endValq3 =  this.yonghu.examinedCount
        this.endValq4 =  this.yonghu.needCount
        this.endValq5 =  this.yonghu.supplyCount
        this.endValq6 =  this.yonghu.onlineCount

      })
    },
    // methods: {
    //   watchScroll () {
    //     var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    //     //  当滚动超过 50 时，实现吸顶效果
    //     if (scrollTop > 49) {
    //       this.isSticky = true
    //     } else {
    //       this.isSticky = false
    //     }
    //   }
    // }
  },
  watch: {
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll)
    },
    // quyu(newVal) {
    //   if (newVal === 10) {
    //     this.$nextTick(() => {
    //       this.$refs.quyuElement.classList.add('transition-animation');
    //     });
    //   } else {
    //     this.$refs.quyuElement.classList('transition-animation');
    //   }
    // }
  },

  mounted() {
    // window.addEventListener('scroll', this.initHeight);
    // this.$nextTick(() => {
    //   //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
    //   this.offsetTop = document.querySelector('#boxFixed').offsetTop;
    // })
    // const target = this.$refs.counter;
    // const endValue = parseInt(target.getAttribute('data-end-value'));
    // console.log(endValue)
    // const duration = 2000; // 动画持续时间（单位：毫秒）
    // const interval = 50; // 更新数字的时间间隔（单位：毫秒）
    //
    // const increment = Math.floor((endValue - this.currentNumber) / (duration / interval));
    //
    // let count = 0;
    // const timer = setInterval(() => {
    //   if (count >= duration) {
    //     clearInterval(timer);
    //     this.currentNumber = endValue;
    //   } else {
    //     this.currentNumber += increment;
    //     count += interval;
    //   }
    // }, interval);
    this.created()
    this.getulianList()
    this.getstatTics()
    this.gettisTics()
    this.getuserCount(this.types)
    this.getusreList(this.types)
    this.getData(this.types)
    this.getsulianList(this.types)
   // this.updateSelectedButton()
  },
};
</script>

<style scoped lang="scss">
.box-23 {
  margin-right: 100px !important; /* 默认的外边距 */
}

@media screen and (min-width: 1700px) {
  .box-23 {
    margin-left: 50px !important; /* 在屏幕宽度大于等于768px时的外边距 */
  }
}

@media screen and (min-width: 2000px) {
  .box-23 {
    margin-left: 100px !important; /* 在屏幕宽度大于等于1024px时的外边距 */
  }
}
.box-24 {
  margin-right: 58px !important; /* 默认的外边距 */
}

@media screen and (min-width: 1700px) {
  .box-24 {
    margin-left: 100px !important; /* 在屏幕宽度大于等于768px时的外边距 */
  }
}

@media screen and (min-width: 2000px) {
  .box-24 {
    margin-left: 200px !important; /* 在屏幕宽度大于等于1024px时的外边距 */
  }
}


.el-button{
  margin-right: 6px;
  margin-left: 0;
  border-color: #00afff;
}
.box-flex{
  margin-right: 20px;
  display: flex;
  //flex-direction: row-reverse;
}
.zs-box,.zs-box2,.zs-box3,.zs-box4,.zs-box5,.zs-box6{
  border-radius: 20px 20px 5px 5px;
  width: 270px;
  height:160px;
  margin-left: 38px;
  display: flex;
  //justify-content: center;
  align-items: center;
}
.zs-box{
  background: linear-gradient(to right, #41A5FF, #AAD7FF);
  box-shadow: 0 0 20px rgba(65, 165, 255, 0.3);
}
.zs-box2{
  background: linear-gradient(to right, #FD5891, #FDC6DA);
  box-shadow: 0 0 20px rgba(65, 165, 255, 0.3);
}
.zs-box3{
  background: linear-gradient(to right, #FF5B1F, #FFD8C9);
  box-shadow: 0 0 20px rgba(615, 165, 255, 0.3);
}
.zs-box4{
  background: linear-gradient(to right, #C128C1, #DC90DA);
  box-shadow: 0 0 20px rgb(236, 240, 241);
}
.zs-box5{
  background: linear-gradient(to right, #1BBE66, #B2E5C9);
  box-shadow: 0 0 20px rgb(236, 240, 241);
}
.zs-box6{
  background: linear-gradient(to right, #1BBE66, #B2E5C9);
  box-shadow: 0 0 20px rgb(236, 240, 241);
}
.tx-box{
  margin-left: 28px;
  width:80px;
  height:80px;
  background: url("../assets/images/5.png");
  margin-right: 20px
}
.tx-box1{
  margin-left: 10px;
  width:60px;
  height:60px;
  //background: url("../assets/images/5.png");
  margin-right: 15px
}
.text-2{
  height: 20px;
  font-size: 20px;
  font-family: Source Han Sans SC-Regular, Source Han Sans SC;
  font-weight: 400;
  color: #FFFFFF;
}
.text-3{
  margin-top: 14px;
  //width: 122px;
  height: 43px;
  font-size: 40px;
  font-family: Source Han Sans SC-Regular, Source Han Sans SC;
  font-weight: 400;
  color: #FFFFFF;
}
.text-21{
  height: 20px;
  font-size: 16px;
  font-family: Source Han Sans SC-Regular, Source Han Sans SC;
  font-weight: 400;
  color: #FFFFFF;
}
.text-31{
  margin-top: 13px;
  //width: 122px;
  height: 32px;
  font-size: 32px;
  font-family: Source Han Sans SC-Regular, Source Han Sans SC;
  font-weight: 400;
  color: #FFFFFF;
}
.home {
margin: 0;
}
.box-1{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .box{
    //width: 60px;
    //display: flex;
    //flex-direction: column;
    //align-items: center;
    //justify-content: center;
    //margin-right: 43px;
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;

  }
  .box-2{
    width: auto;
    height: 37px;
    font-size: 26px;
    //font-family: Source Han Sans SC-Medium, Source Han Sans SC;
    font-weight: 500;
    color: #333333;
  }
  .box-xx{
    margin-left: 33px;
    margin-right: 43px;
    width: 1px;
    height: 55px;
    background: #f1fffe;
    border-radius: 5px 5px 0px 0px;
    opacity: 1;
  }
  .text-1{
    width: auto;
    margin-bottom: 11px;
    height: 18px;
    font-size: 18px;
    //font-family: Source Han Sans SC-Regular, Source Han Sans SC;
    font-weight: 400;
    color: #808080;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s; /* Specify the desired property and duration */
}

.fade-enter,
.fade-leave-to {
  opacity: 0; /* Specify the initial and final values of the property being animated */
}

.transition-animation {
  transition: all 0.5s ease; /* Adjust the duration and timing function as needed */
}
.box-21{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.box-19{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.is_fixed{
  //margin-left: 550px;
  //position: fixed;
  //top: 150px;
  //left: 800px;
  width: 100%;
  z-index: 9999;
}
.box-20{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
</style>

